<template>
  <div class="order-confirm-container">
    <!-- 修改二维码弹窗 -->
    <el-dialog
      v-model="showQRCode"
      title="支付二维码"
      width="400px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
    >
      <div class="qrcode-container">
        <canvas id="qrious"></canvas>
        <p class="qrcode-tip">请使用支付宝扫描二维码支付</p>
      </div>
    </el-dialog>
    
    <div class="user-info-bar">
      <div class="back-button" @click="handleCancelBooking">
        <el-icon class="back-icon"><ArrowLeftBold /></el-icon>
        <span>取消</span>
      </div>
      <div class="user-info">
        <el-icon><User /></el-icon>
        <span>您好，{{ userInfo.userName }}</span>
      </div>
    </div>

    <div class="order-box">
      <div class="order-header">
        <div class="header-tabs">
          <div class="tab" :class="{ active: activeTab === 'checkout' }" @click="activeTab = 'checkout'">结账</div>
          <div class="tab" :class="{ active: activeTab === 'overview' }" @click="activeTab = 'overview'">订单概览</div>
        </div>
      </div>

      <div class="order-content">
        <div class="payment-section" v-show="activeTab === 'checkout'">
          <h3>支付方式</h3>
          
          <div class="payment-methods">
            <div class="payment-method">
              <input type="radio" id="alipay" name="payment" value="alipay" checked>
              <label for="alipay" class="method-label">
                <div class="payment-icon alipay">
                  <el-icon><Wallet /></el-icon>
                </div>
                <span class="method-name">支付宝</span>
              </label>
            </div>

            <div class="payment-method">
              <input type="radio" id="wechat" name="payment" value="wechat">
              <label for="wechat" class="method-label">
                <div class="payment-icon wechat">
                  <el-icon><ChatDotRound /></el-icon>
                </div>
                <span class="method-name">微信支付</span>
              </label>
            </div>

            <div class="payment-method">
              <input type="radio" id="bankcard" name="payment" value="bankcard">
              <label for="bankcard" class="method-label">
                <div class="payment-icon bankcard">
                  <el-icon><CreditCard /></el-icon>
                </div>
                <span class="method-name">银行卡支付</span>
              </label>
            </div>
          </div>
        </div>

        <!-- 订单概览内容 -->
        <div class="payment-section" v-show="activeTab === 'overview'">
          <h3>订单概览</h3>
          
          <div class="order-overview">
            <div class="overview-item">
              <span class="overview-label">订单号:</span>
              <span class="overview-value">{{ orderInfo.ordersId || '暂未生成' }}</span>
            </div>
            
            <div class="overview-item">
              <span class="overview-label">课程名称:</span>
              <span class="overview-value">{{ orderInfo.courseName }}</span>
            </div>
            
            <div class="overview-item">
              <span class="overview-label">教师:</span>
              <span class="overview-value">{{ orderInfo.teacherName }}</span>
            </div>
            
            <div class="overview-item">
              <span class="overview-label">学校:</span>
              <span class="overview-value">{{ orderInfo.teacherSchool || '未设置' }}</span>
            </div>
            
            <div class="overview-item">
              <span class="overview-label">真实姓名:</span>
              <span class="overview-value">{{ userInfo.realName || '未设置' }}</span>
            </div>
            
            <div class="overview-item">
              <span class="overview-label">价格:</span>
              <span class="overview-value">¥{{ orderInfo.originalPrice || '0.00' }}</span>
            </div>
            
            <div class="overview-item">
              <span class="overview-label">支付方式:</span>
              <span class="overview-value">{{ getSelectedPaymentName() }}</span>
            </div>
          </div>
        </div>

        <div class="order-summary">
          <div class="course-info">
            <div class="course-image">
              <img v-if="orderInfo.courseImage" :src="orderInfo.courseImage" alt="课程图片" class="course-img" />
              <el-icon v-else><Reading /></el-icon>
            </div>
            <div class="course-details">
              <h4>{{ orderInfo.courseName }}</h4>
              <div class="course-meta">
                <span>{{ orderInfo.teacherName }}</span>
                <span>{{ orderInfo.teacherSchool }}</span>
              </div>
            </div>
          </div>

          <div class="price-summary">
            <div class="price-row">
              <span>价格</span>
              <span>¥{{ orderInfo.originalPrice || '0.00' }}</span>
            </div>
            <div class="price-row discount highlight">
              <span>折扣:</span>
              <span>{{ orderInfo.discount || 0 }}</span>
            </div>
            
            <div class="countdown-wrapper">
              <div class="countdown-label">剩余支付时间</div>
              <div class="countdown-time">{{ formatTime(countdown) }}</div>
            </div>
            
            <div class="price-row total">
              <span>总计</span>
              <span>¥{{ orderInfo.price || '0.00' }}</span>
            </div>
          </div>

          <div class="agreement-section">
            <label class="agreement-label">
              <input type="checkbox" v-model="agreeTerms">
              <span>点击"下订单"，即表示您已满 18 岁，并且同意付款方式的使用协议。</span>
            </label>
          </div>

          <div class="action-buttons">
            <el-button type="primary" class="submit-button" :disabled="!agreeTerms" @click="handlePay">
              下订单
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
/* eslint-disable no-undef */
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElDialog } from 'element-plus'
import { Wallet, ChatDotRound, Reading, User, CreditCard, ArrowLeftBold } from '@element-plus/icons-vue'
import { getUserInfo, getCourseInfo, getTeacherInfo, createOrder, queryPayStatus, cancelBookCourse } from '@/api/order'
import QRious from 'qrious'


const router = useRouter()
const route = useRoute()

// 添加标签切换功能
const activeTab = ref('checkout')

// 添加倒计时功能
const countdown = ref(3 * 60) // 5分钟 = 300秒
let timer = null

// 格式化时间为分:秒格式
const formatTime = (seconds) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
}

// 用户信息
const userInfo = ref({
  userName: '',
  userId: '',
  avatar: '',
  realName: ''
})

const agreeTerms = ref(false)
const orderInfo = ref({
  ordersId: '',
  userId: '',
  scheduleId: '',
  courseId: '',
  paymentAmount: 0,
  status: null,
  paymentChannel: null,
  transactionId: null,
  createTime: null,
  
  // 课程详情字段
  courseName: '',
  courseImage: '',
  teacherName: '',
  originalPrice: 0,
  discount: 0,
  price: 0,
  
  // 教师详细信息
  teacherAvatar: '',
  teacherEducation: '',
  teacherSchool: '',
  teachingStyle: '',
  teachingAge: '',
  teacherIntroduction: ''
})

// 获取选中的支付方式名称
const getSelectedPaymentName = () => {
  const selectedValue = document.querySelector('input[name="payment"]:checked')?.value
  switch (selectedValue) {
    case 'alipay':
      return '支付宝'
    case 'wechat':
      return '微信支付'
    case 'bankcard':
      return '银行卡支付'
    default:
      return '支付宝'
  }
}

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const response = await getUserInfo()
    
    if (response.code === 200) {
      userInfo.value = {
        userName: response.data.userName,
        userId: response.data.userId,
        avatar: response.data.ossImages?.[0]?.url || '',
        realName: response.data.realName
      }
    } else {
      ElMessage.error('获取用户信息失败:' + response.message)
      userInfo.value.userName = '用户'
    }
  } catch (error) {
    ElMessage.error('获取用户信息失败')
    userInfo.value.userName = '用户'
  }
}

// 获取课程信息
const fetchCourseInfo = async () => {
  try {
    // 先从路由参数获取scheduleId
    const scheduleId = route.query.scheduleId
    
    if (!scheduleId) {
      ElMessage.error('缺少课程安排ID')
      return
    }

    // 从localStorage获取订单数据
    const orderDataString = localStorage.getItem('currentOrderData')
    if (orderDataString) {
      try {
        const orderData = JSON.parse(orderDataString)
        orderInfo.value = {
          ...orderInfo.value,
          ordersId: orderData.ordersId,
          courseId: orderData.courseId,
          scheduleId: orderData.scheduleId || scheduleId,
          userId: orderData.userId,
          appointmentDate: orderData.appointmentDate
        }
      } catch (error) {
        console.error('解析订单数据失败:', error)
      }
    } else {
      // 如果localStorage中没有数据，使用路由参数
      orderInfo.value.scheduleId = scheduleId
    }

    // 获取课程信息
    const response = await getCourseInfo(scheduleId)
    
    if (response.code === 200) {
      const courseData = response.data
      
      // 更新订单信息
      orderInfo.value = {
        ...orderInfo.value,
        userId: courseData.userId || userInfo.value.userId,
        scheduleId: scheduleId,
        courseId: courseData.courseId,
        paymentAmount: courseData.price,
        status: courseData.status,
        paymentChannel: courseData.paymentChannel,
        transactionId: courseData.transactionId,
        createTime: courseData.createTime,
        appointmentDate: courseData.appointmentDate,
        courseName: courseData.title,
        courseImage: courseData.titleImg,
        originalPrice: courseData.price,
        price: courseData.price,
        teacherName: courseData.teacher?.userName || courseData.teacherName || '未知教师'
      }

      // 获取教师信息
      if (courseData.courseId) {
        await fetchTeacherInfo(courseData.courseId)
      } else {
        ElMessage.warning('未找到课程ID，无法获取教师信息')
      }
    } else {
      ElMessage.error('获取课程信息失败:' + response.message)
    }
  } catch (error) {
    console.error('获取课程信息失败:', error)
    ElMessage.error('获取课程信息失败')
  }
}

// 获取教师详细信息
const fetchTeacherInfo = async (courseId) => {
  if (!courseId) {
    ElMessage.warning('获取教师信息失败：课程ID为空')
    return
  }

  try {
    const response = await getTeacherInfo(courseId)
    
    if (response.code === 200) {
      // 将教师信息存储到orderInfo中
      orderInfo.value = {
        ...orderInfo.value,
        teacherName: response.data.userName || response.data.realName || '未知教师', // 优先使用userName，其次是realName
        teacherAvatar: response.data.teacherAvatar,
        teacherEducation: response.data.education,
        teacherSchool: response.data.school,
        teachingStyle: response.data.teachingStyle,
        teachingAge: response.data.teachingAge,
        teacherIntroduction: response.data.introduction
      }
    } else {
      ElMessage.error('获取教师信息失败:' + response.message)
    }
  } catch (error) {
    ElMessage.error('获取教师信息失败')
  }
}

// 添加二维码相关的响应式变量
const showQRCode = ref(false)

// 处理支付
const handlePay = async () => {
  if (!agreeTerms.value) {
    ElMessage.warning('请先阅读并同意用户协议')
    return
  }

  try {
    const token = sessionStorage.getItem('token') || localStorage.getItem('token')
    if (!token) {
      ElMessage.warning('请先登录')
      return
    }

    // 检查必要的数据是否存在
    if (!orderInfo.value.courseId || !orderInfo.value.scheduleId) {
      ElMessage.error('缺少必要的课程信息')
      return
    }

    // 创建订单
    const orderData = {
      ordersId: orderInfo.value.ordersId,
      userId: userInfo.value.userId,
      scheduleId: orderInfo.value.scheduleId,
      courseId: orderInfo.value.courseId,
      paymentAmount: orderInfo.value.price,
      paymentChannel: 'alipay',
      appointmentDate: orderInfo.value.appointmentDate
    }

    // 检查数据完整性
    if (!orderData.userId || !orderData.scheduleId || !orderData.courseId) {
      ElMessage.error('订单数据不完整，请重试')
      return
    }

    // 如果金额为0，直接创建订单并跳转
    if (orderData.paymentAmount === 0) {
      const response = await createOrder(orderData)
      if (response.code === 200 && response.data) {
        // 将订单数据存储到localStorage，用于OrderDetail页面获取
        localStorage.setItem('orderDetailData', JSON.stringify({
          ordersId: response.data.ordersId,
          userId: response.data.userId,
          scheduleId: response.data.scheduleId,
          courseId: response.data.courseId,
          paymentAmount: response.data.paymentAmount,
          status: response.data.status,
          paymentChannel: response.data.paymentChannel,
          transactionId: response.data.transactionId,
          createTime: response.data.createTime
        }))
        
        // 跳转到订单详情页面
        router.push({
          path: '/order/detail',
          query: {
            orderId: response.data.ordersId || orderInfo.value.ordersId
          }
        })
        return
      } else {
        ElMessage.error('创建订单失败:' + (response.message || '未知错误'))
        return
      }
    }

    // 金额不为0的情况，继续原有的支付流程
    const response = await createOrder(orderData)
    console.log('创建订单响应:', response)
    
    if (response.code === 200 && response.data) {
      // 显示支付二维码
      showQRCode.value = true
      
      // 在下一个tick生成二维码
      nextTick(() => {
        if (response.data.qrcode) {
          console.log('生成二维码URL:', response.data.qrcode)
          // 使用QRious生成二维码
          new QRious({
            element: document.getElementById('qrious'),
            size: 250,
            level: 'H',
            value: response.data.qrcode
          })
          
          // 保存订单数据到localStorage
          localStorage.setItem('currentOrderData', JSON.stringify({
            ordersId: orderInfo.value.ordersId,
            courseId: orderData.courseId,
            scheduleId: orderData.scheduleId,
            userId: orderData.userId,
            appointmentDate: orderData.appointmentDate
          }))
          
          // 开始轮询支付状态
          startPollingPaymentStatus()
        } else {
          console.error('未获取到二维码URL')
          ElMessage.error('获取支付二维码失败')
        }
      })
    } else {
      ElMessage.error('创建订单失败:' + (response.message || '未知错误'))
    }
  } catch (error) {
    console.error('创建订单失败:', error)
    ElMessage.error('创建订单失败，请重试')
  }
}

// 开始轮询支付状态
const startPollingPaymentStatus = () => {
  if (timer) {
    clearInterval(timer)
  }
  
  timer = setInterval(async () => {
    try {
      const response = await queryPayStatus(orderInfo.value.ordersId)
      console.log('支付状态查询响应:', response)
      
      if (response.code === 200) {
        // 解析支付宝返回的交易状态
        const alipayResponse = response.data.response ? JSON.parse(response.data.response) : null
        const tradeStatus = alipayResponse?.alipay_trade_query_response?.trade_status
        
        if (tradeStatus === 'TRADE_SUCCESS' || response.data.status === 'TRADE_SUCCESS') {
          // 支付成功，清理并跳转
          clearInterval(timer)
          showQRCode.value = false
          localStorage.removeItem('currentOrderData')
          router.push({
            path: '/order/detail',
            query: {
              orderId: orderInfo.value.ordersId
            }
          })
        } else if (tradeStatus === 'TRADE_CLOSED' || tradeStatus === 'TRADE_FINISHED' || 
                  response.data.status === 'TRADE_CLOSED' || response.data.status === 'TRADE_FINISHED') {
          // 支付关闭或完成
          clearInterval(timer)
          showQRCode.value = false
          ElMessage.warning('支付已关闭')
          localStorage.removeItem('currentOrderData')
        }
      }
    } catch (error) {
      console.error('查询支付状态失败:', error)
    }
  }, 3000) // 每3秒查询一次
}

// 检查App.vue中的方法
const hideUIComponents = () => {
  // 1. 检查window对象中是否存在全局事件总线
  if (window.eventBus) {
    window.eventBus.$emit('hideAIChat', true)
    window.eventBus.$emit('hideBackToTop', true)
  }
  
  // 2. 尝试在window上设置标志
  window.hideAIChat = true
  window.hideBackToTop = true
  
  // 3. 创建样式表隐藏这些元素
  const style = document.createElement('style')
  style.id = 'hide-components-style'
  style.innerHTML = `
    .ai-chat-button, .back-to-top {
      display: none !important;
    }
  `
  document.head.appendChild(style)
}

const showUIComponents = () => {
  // 1. 如果存在全局事件总线
  if (window.eventBus) {
    window.eventBus.$emit('hideAIChat', false)
    window.eventBus.$emit('hideBackToTop', false)
  }
  
  // 2. 移除window上的标志
  delete window.hideAIChat
  delete window.hideBackToTop
  
  // 3. 移除添加的样式
  const style = document.getElementById('hide-components-style')
  if (style) {
    document.head.removeChild(style)
  }
}

onMounted(() => {
  // 设置页面元信息
  document.title = '订单确认'
  if (route.meta && typeof route.meta.hideNav === 'undefined') {
    route.meta.hideNav = true
  }
  
  if (route.meta) {
    route.meta.hideAI = true
    route.meta.hideBackToTop = true
  }
  
  hideUIComponents()
  fetchUserInfo()
  fetchCourseInfo()
  startCountdown()
})

// 启动倒计时
const startCountdown = () => {
  // 清除已有的定时器
  if (timer) {
    clearInterval(timer)
  }
  
  // 设置新的定时器
  timer = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--
    } else {
      // 倒计时结束
      clearInterval(timer)
      ElMessage.warning('支付时间已到，订单即将取消')
      
      // 取消预约
      cancelBooking()
      
      // 取消成功后返回首页
      setTimeout(() => {
        router.push('/home')
      }, 2000)
    }
  }, 1000)
}

// 取消预约
const cancelBooking = async () => {
  try {
    const cancelData = {
      scheduleId: orderInfo.value.scheduleId,
      userId: userInfo.value.userId
    }

    const response = await cancelBookCourse(cancelData)
    
    if (response.code === 200) {
      ElMessage.success('取消预约成功')
      router.push('/home')
    } else {
      ElMessage.error('取消预约失败:' + response.message)
    }
  } catch (error) {
    ElMessage.error('取消预约失败')
  }
}

// 取消预约
const handleCancelBooking = async () => {
  try {
    const token = sessionStorage.getItem('token') || localStorage.getItem('token')
    if (!token) {
      ElMessage.warning('请先登录')
      return
    }

    // 从路由参数获取scheduleId
    const routeScheduleId = route.query.scheduleId
    console.log('路由参数中的scheduleId:', routeScheduleId)

    const orderDataString = localStorage.getItem('currentOrderData')
    console.log('localStorage中的订单数据:', orderDataString)
    
    if (orderDataString) {
      try {
        const orderData = JSON.parse(orderDataString)
        console.log('解析后的订单数据:', orderData)
        
        orderInfo.value = {
          ...orderInfo.value,
          ordersId: orderData.ordersId,
          courseId: orderData.courseId,
          scheduleId: orderData.scheduleId || routeScheduleId,
          userId: orderData.userId || userInfo.value.userId,
          appointmentDate: orderData.appointmentDate
        }
      } catch (error) {
        console.error('解析订单数据失败:', error)
        ElMessage.error('解析订单数据失败')
      }
    }

    // 如果localStorage中没有数据，使用路由参数
    if (!orderInfo.value.scheduleId && routeScheduleId) {
      orderInfo.value.scheduleId = routeScheduleId
    }

    // 如果还没有courseId，尝试从课程信息中获取
    if (!orderInfo.value.courseId && orderInfo.value.scheduleId) {
      try {
        const courseResponse = await getCourseInfo(orderInfo.value.scheduleId, token)
        if (courseResponse.code === 200 && courseResponse.data) {
          orderInfo.value.courseId = courseResponse.data.courseId
          console.log('从API获取的课程信息:', courseResponse.data)
        }
      } catch (error) {
        console.error('获取课程信息失败:', error)
      }
    }

    console.log('最终订单信息:', orderInfo.value)

    if (!orderInfo.value.courseId || !orderInfo.value.scheduleId) {
      ElMessage.error('缺少必要的课程信息，请刷新页面重试')
      return
    }

    const cancelData = {
      courseId: orderInfo.value.courseId,
      scheduleId: orderInfo.value.scheduleId,
      userId: orderInfo.value.userId || userInfo.value.userId,
      ordersId: orderInfo.value.ordersId,
      appointmentDate: orderInfo.value.appointmentDate
    }

    console.log('准备发送的取消数据:', cancelData)

    const response = await cancelBookCourse(cancelData, token)

    if (response.code === 200) {
      ElMessage.success('取消预约成功')
      localStorage.removeItem('currentOrderData')
      if (timer) {
        clearInterval(timer)
      }
      router.back()
    } else {
      ElMessage.error(response.message || '取消预约失败')
    }
  } catch (error) {
    ElMessage.error('取消预约失败，请重试')
  }
}

// 组件卸载时清理localStorage中的订单数据和定时器
onUnmounted(() => {
  localStorage.removeItem('currentOrderData')
  
  if (timer) {
    clearInterval(timer)
  }
  
  if (route.meta) {
    route.meta.hideAI = false
    route.meta.hideBackToTop = false
  }
  
  showUIComponents()
})
</script>

<style scoped>
.order-confirm-container {
  min-height: 100vh;
  background: #f5f7fa;
  color: #303133;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* 新增全局样式来隐藏AI聊天按钮和返回顶部按钮 */
:deep(#app > div[class*="ai"]),
:deep(#app > div[class*="AI"]),
:deep(#app > div[class*="Back"]),
:deep(#app > div[class*="back"]) {
  display: none !important;
}

/* 用户信息栏样式 */
.user-info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #606266;
  transition: all 0.3s ease;
  padding: 6px 12px;
  border-radius: 4px;
  background-color: #f4f4f5;
}

.back-button:hover {
  background-color: #e9e9eb;
  color: #409EFF;
}

.back-icon {
  font-size: 16px;
}

.back-button span {
  font-size: 14px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-info .el-icon {
  color: #409eff;
  font-size: 18px;
}

.order-box {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.order-header {
  margin-bottom: 30px;
}

.header-tabs {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid #dcdfe6;
}

.tab {
  padding: 12px 0;
  font-size: 18px;
  color: #909399;
  cursor: pointer;
  position: relative;
}

.tab.active {
  color: #303133;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #409eff;
}

.order-content {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 40px;
}

.payment-section {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.payment-section h3 {
  margin: 0 0 20px 0;
  font-size: 20px;
  font-weight: 500;
  color: #303133;
}

.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.payment-method {
  position: relative;
}

.payment-method input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.method-label {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f5f7fa;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.payment-method input[type="radio"]:checked + .method-label {
  background: #ecf5ff;
  border-color: #409eff;
}

.payment-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #dcdfe6;
}

.payment-icon .el-icon {
  font-size: 20px;
  color: #409eff;
}

.payment-icon.alipay {
  color: #00a0e9;
}

.payment-icon.wechat {
  color: #2aae67;
}

.payment-icon.bankcard {
  color: #67c23a;
}

.method-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}

.method-name {
  font-size: 16px;
  color: #303133;
}

.method-amount {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.order-summary {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.course-info {
  display: flex;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 20px;
  align-items: center;
}

.course-image {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  overflow: hidden;
}

.course-image .el-icon {
  font-size: 48px;
  color: #909399;
}

.course-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-details h4 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 500;
  color: #303133;
  word-break: break-word;
}

.course-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #909399;
  font-size: 14px;
}

.price-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.price-row {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  color: #606266;
}

.price-row.discount {
  color: #67c23a;
}

.price-row.highlight {
  background-color: #f0f9eb;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #e1f3d8;
}

.price-row.total {
  padding-top: 12px;
  border-top: 1px solid #ebeef5;
  font-size: 18px;
  font-weight: 500;
  color: #303133;
  margin-top: 8px;
}

.countdown-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
  padding: 10px 0;
  border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}

.countdown-label {
  font-size: 14px;
  color: #303133;
}

.countdown-time {
  font-size: 16px;
  font-weight: 600;
  color: #f56c6c;
}

.agreement-section {
  margin: 24px 0;
}

.agreement-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
}

.agreement-label input[type="checkbox"] {
  margin-top: 3px;
}

.submit-button {
  width: 100%;
  height: 48px;
  font-size: 16px;
  background: #409eff;
  border: none;
  border-radius: 8px;
  margin-top: 16px;
}

.submit-button:hover {
  background: #66b1ff;
}

.submit-button:disabled {
  background: #a0cfff;
  color: #fff;
  cursor: not-allowed;
}

/* 订单概览样式 */
.order-overview {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.overview-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
}

.overview-item:last-child {
  border-bottom: none;
}

.overview-label {
  width: 100px;
  color: #909399;
  font-size: 14px;
}

.overview-value {
  flex: 1;
  color: #303133;
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .order-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .order-box {
    padding: 20px;
  }

  .course-info {
    flex-direction: column;
  }

  .course-image {
    width: 100%;
    height: 200px;
  }
}

/* 修改二维码样式 */
.qrcode-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  background: #f8f9fa;
  border-radius: 8px;
}

#qrious {
  border: 1px solid #ddd;
  padding: 15px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.qrcode-tip {
  margin-top: 15px;
  color: #666;
  font-size: 14px;
}

:deep(.el-dialog__header) {
  text-align: center;
  padding: 20px;
  margin-right: 0;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-dialog__title) {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}

:deep(.el-dialog__headerbtn) {
  top: 20px;
}

:deep(.el-dialog__body) {
  padding: 0;
}
</style> 